<template>
  <div class="_wz_postResponsibilityAdd">
    <div style="padding: 10px 10px 0 0;">
      <Form ref="riskPointDataForm" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">负责人责任制</p>
          <FormItem label="责任制照片">
            <Upload :before-upload="postLeadingImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传负责人责任制照片</Upload>
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!postLeadingImg.url?postLeadingImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </FormItem>
          <FormItem label="负责人责任制" prop="postLeadingContent">
            <tinymce :htmlData="formData.postLeadingContent" :height="500" @tinymceData="val => formData.postLeadingContent = val"></tinymce>
          </FormItem>
        </Card>


        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">管理人责任制</p>
          <FormItem label="责任制照片">
            <Upload :before-upload="postManagerImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传负管理人任制照片</Upload>
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!postManagerImg.url?postManagerImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </FormItem>
          <FormItem label="管理人责任制" prop="postManagerContent">
            <tinymce :htmlData="formData.postManagerContent" :height="500" @tinymceData="val => formData.postManagerContent = val"></tinymce>
          </FormItem>
        </Card>



        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">安全员责任制</p>
          <FormItem label="责任制照片">
            <Upload :before-upload="postSafetyImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传安全员责任制照片</Upload>
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!postSafetyImg.url?postSafetyImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </FormItem>
          <FormItem label="安全员责任制" prop="postSafetyContent">
            <tinymce :htmlData="formData.postSafetyContent" :height="500" @tinymceData="val => formData.postSafetyContent = val"></tinymce>
          </FormItem>
        </Card>


        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">驾驶员责任制</p>
          <FormItem label="责任制照片">
            <Upload :before-upload="postDriverImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传驾驶员责任制照片</Upload>
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!postDriverImg.url?postDriverImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </FormItem>
          <FormItem label="驾驶员责任制" prop="postDriverContent">
            <tinymce :htmlData="formData.postDriverContent" :height="500" @tinymceData="val => formData.postDriverContent = val"></tinymce>
          </FormItem>
        </Card>

      </Form>
    </div>


    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('riskPointDataForm')">提交</Button>
    </div>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

import tinymce from "../../../components/table/tinymce";

export default {
  components: {
    tinymce,
  },
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {

      uploadProgress: 0,//文件上传进度
      riskCheckPhaseList: [],
      spinShow: false,//本页加载
      ruleValidate: {//正则
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],

      },
      subDeptList: [],//运输企业
      formData: {
        deptUuid:''
      },

      postLeadingImg: {data: null,url: ''},//负责人岗位责任制
      postManagerImg: {data: null,url: ''},//管理人员岗位责任制
      postSafetyImg: {data: null,url: ''},//安全员岗位责任制
      postDriverImg: {data: null,url: ''},//驾驶员岗位责任制

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    if (!!that.selectData.id) {

      that.formData = that.selectData;
      //负责人岗位责任制
      that.postLeadingImg = {
        data: null,
        url: !!that.formData.postLeadingImg ? that.apiUrl.imgUrl + that.formData.postLeadingImg : ''
      };

      //管理人员岗位责任制
      that.postManagerImg = {
        data: null,
        url: !!that.formData.postManagerImg ? that.apiUrl.imgUrl + that.formData.postManagerImg : ''
      };


      //安全员岗位责任制
      that.postSafetyImg = {
        data: null,
        url: !!that.formData.postSafetyImg ? that.apiUrl.imgUrl + that.formData.postSafetyImg : ''
      };


      //驾驶员岗位责任制
      that.postDriverImg = {
        data: null,
        url: !!that.formData.postDriverImg ? that.apiUrl.imgUrl + that.formData.postDriverImg : ''
      };


    }

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if (!that.selectData.id) {
          that.formData.deptUuid = that.subDeptList[0].uuid;
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    postLeadingImgFun(file) {//负责人岗位责任制
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.postLeadingImg.url = window.URL.createObjectURL(file);
        that.postLeadingImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    postManagerImgFun(file) {//管理人员岗位责任制
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.postManagerImg.url = window.URL.createObjectURL(file);
        that.postManagerImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    postSafetyImgFun(file) {//安全员岗位责任制
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.postSafetyImg.url = window.URL.createObjectURL(file);
        that.postSafetyImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    postDriverImgFun(file) {//驾驶员岗位责任制
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.postDriverImg.url = window.URL.createObjectURL(file);
        that.postDriverImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },


    //提交表单
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使上传



          var data = JSON.parse(JSON.stringify(that.formData));
          let formData = new FormData();
          delete data.updateTime;
          delete data.createTime;
          delete data.postLeadingImg;
          delete data.postLeadingImgFile;
          delete data.postManagerImg;
          delete data.postManagerImgFile;
          delete data.postSafetyImg;
          delete data.postSafetyImgFile;
          delete data.postDriverImg;
          delete data.postDriverImgFile;


          for (let key in data) {
            formData.append(key, data[key]);
          }

          //负责人岗位责任制
          if (!!that.postLeadingImg.data) {//选择了图片
            formData.append('postLeadingImgFile', that.postLeadingImg.data);
          }

          //管理人员岗位责任制
          if (!!that.postManagerImg.data) {//选择了图片
            formData.append('postManagerImgFile', that.postManagerImg.data);
          }

          //安全员岗位责任制
          if (!!that.postSafetyImg.data) {//选择了图片
            formData.append('postSafetyImgFile', that.postSafetyImg.data);
          }

          //驾驶员岗位责任制
          if (!!that.postDriverImg.data) {//选择了图片
            formData.append('postDriverImgFile', that.postDriverImg.data);
          }


          that.axios.post(that.apiUrl.webApi + "/safety/deptSystem/deptSystemPostSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        }else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_postResponsibilityAdd {
  overflow: auto;
  height: 100%;

  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
}

.ql-container{
  height: 150px;
}
</style>
